<template>
  <div class="work-history">
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="openEditor()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="workHistoryList" border height="450px">
      <el-table-column label="序号" type="index" align="center"></el-table-column>
      <el-table-column label="起始时间" align="center" width="200">
        <template slot-scope="scope">{{scope.row.startTime}} — {{scope.row.endTime}}</template>
      </el-table-column>
      <el-table-column label="地点" prop="place" align="center">
        <el-tooltip :content="scope.row.place" placement="top" slot-scope="scope">
          <div class="ellipsis">{{scope.row.place}}</div>
        </el-tooltip>
      </el-table-column>
      <el-table-column label="职务" prop="craft" align="center">
        <el-tooltip :content="scope.row.craft" placement="top" slot-scope="scope">
          <div class="ellipsis">{{scope.row.craft}}</div>
        </el-tooltip>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="openEditor(scope.row.id)">修改</el-button>
          <el-button type="text" @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      width="600px"
      append-to-body
      title="编辑工作经历"
      @close="closeEditor()"
      :close-on-click-modal="false"
      :visible.sync="editorVisible"
    >
      <el-form :model="workForm" ref="workForm" label-width="100px" :rules="workFormRules">
        <el-form-item label="起始日期" prop="dateRange">
          <el-date-picker
            v-model="workForm.dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="地点" prop="place">
          <el-input v-model="workForm.place" />
        </el-form-item>

        <el-form-item label="职务" prop="craft">
          <el-input v-model="workForm.craft" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="closeEditor()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'workHistory',
  data() {
    return {
      editorVisible: false,
      workHistoryList: [],
      workForm: {
        dateRange: [],
        isEdit: false,
        id: null,
        userId: null,
        startTimeStr: '',
        endTimeStr: '',
        craft: '',
        place: ''
      },
      workFormRules: {
        userId: [{ required: true, message: '未指定用户', trigger: 'blur' }],
        dateRange: [
          { required: true, message: '请选择起始日期', trigger: 'blur' }
        ],
        place: [{ required: true, message: '请填写工种地点', trigger: 'blur' }],
        craft: [{ required: true, message: '请填写职务', trigger: 'blur' }]
      }
    }
  },
  props: {
    userId: {
      type: String,
      required: true
    }
  },
  methods: {
    async loadWorkHistoryList() {
      let res = await this.$http({
        url: this.$http.adornUrl('/usercenter-admin/workHistory/list'),
        method: 'post',
        data: { userId: this.userId }
      })

      this.workHistoryList = res.data
    },
    openEditor(workId) {
      this.editorVisible = true
      this.$nextTick(() => {
        this.$refs.workForm.resetFields()
        if (workId) {
          this.buildWorkForm(workId)
        } else {
          this.workForm.isEdit = false
          this.workForm.userId = this.userId
        }
      })
    },
    closeEditor() {
      this.editorVisible = false
    },
    async buildWorkForm(userId) {
      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl(`/usercenter-admin/workHistory/info/${userId}`)
      })

      let work = res.data
      this.workForm.isEdit = true
      this.workForm.id = work.id
      this.workForm.userId = work.userId
      this.workForm.startTimeStr = work.startTime
      this.workForm.endTimeStr = work.endTime
      this.workForm.dateRange = [work.startTime, work.endTime]
      this.workForm.craft = work.craft
      this.workForm.place = work.place
    },
    buildRequest() {
      var request = JSON.parse(JSON.stringify(this.workForm))
      delete request.dateRange
      return request
    },
    async save() {
      let valid = await this.$refs.workForm.validate()
      if (!valid) return

      let request = this.buildRequest()
      let res = await this.$http({
        method: 'post',
        url: `/usercenter-admin/workHistory/${request.isEdit ? 'update' : 'save'}`,
        data: request
      })

      if (res && res.code === 200) {
        this.closeEditor()
        this.$notify.success({ title: '成功', message: '保存工作经历成功' })
        await this.loadWorkHistoryList()
      } else {
        this.$notify.error({ title: '失败', messgae: res.msg })
      }
    },
    async deleteById(id) {
      let confirm = await this.$confirm('您确认删除此条工作经历吗？', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确认'
      })
      if (confirm !== 'confirm') return

      let res = await this.$http({
        method: 'post',
        url: this.$http.adornUrl('/usercenter-admin/workHistory/delete'),
        data: { id: id }
      })

      if (res && res.code === 200) {
        this.$notify.success({ title: '成功', message: '删除工作经历成功' })
        await this.loadWorkHistoryList()
      } else {
        this.$notify.error({ title: '失败', message: res.msg })
      }
    }
  },
  watch: {
    userId(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.loadWorkHistoryList()
      }
    },
    'workForm.dateRange'(newVal) {
      if (newVal) {
        this.workForm.startTimeStr = newVal[0]
        this.workForm.endTimeStr = newVal[1]
      }
    }
  },
  created() {
    this.loadWorkHistoryList()
  }
}
</script>

<style>
</style>
